<template>
  <VTable ref="tableRef" v-bind="tableOptins">
    <template #form="{ form }">
      <XForm :fieldList="fieldList" :formOption="optionsData" :formData="form">
      </XForm>
    </template>
    <template #toolbar_btns>
      <VActionBar :actions="actions">
        <template #left>
          <div>
            <VTotal
              ref="totalRef"
              :options="[
                { title: '入账总金额', key: 'inAmount' },
                { title: '出账总金额', key: 'outAmount', symbol: '-' },
              ]"
              :data="totalData"
            />
          </div>
        </template>
      </VActionBar>
    </template>
    <template #details="{ row }">
      <el-button type="primary" link @click="handleDetails(row)"
        >详情</el-button
      >
    </template>
  </VTable>
  <Details
    v-model="detailsVisible"
    :data="detailsData"
    @close="detailsData = ''"
  />
  <DerivedCenter ref="DerivedCenterRef"></DerivedCenter>
</template>
<script setup lang="jsx">
import { ElMessage } from "element-plus";
import { getTableSelectRow } from "@/hooks/tools.js";
import { config_name } from "@/config/export.js";
import XForm from "@/components/XForm/index.vue";
import { getPingpongList, overflowPingpong } from "../../api.js";
import Details from "../details/index";
import { transformData } from "@/utils/tools.js";
import VTotal from "@/components/VTotal";
import { convertToObjectArray } from "@/utils/tools.js";
const props = defineProps({
  optionsData: { type: Object, default: () => {} },
});
const { optionsData } = toRefs(props);
const totalData = ref({});
const getSum = async (params) => {
  const { data } = await overflowPingpong(params);
  let list = convertToObjectArray(data);
  totalData.value = list || {};
};
const tableOptins = reactive({
  formConfig: {
    data: {
      supplierIds: "",
      dateRange: { type: "ticketAt", value: [], range: false },
    },
  },
  tooltipConfig: {
    showAll: false,
  },
  isToggle: true,
  columns: [
    {
      title: "交易时间",
      field: "transactionAt",
      minWidth: 160,
    },
    {
      title: "交易类型",
      field: "todo",
      minWidth: 100,
      slots: {
        default: ({ row }) => {
          return <div>{row.transactionType.label}</div>;
        },
      },
    },
    {
      title: "业务账号",
      field: "account",
      minWidth: 100,
      // slots: {
      //   default: ({ row }) => {
      //     return <div>{row.accountHierarchy.label}</div>;
      //   },
      // },
    },
    {
      title: "流水号",
      field: "transactionId",
      minWidth: 180,
    },
    {
      title: "业务类型",
      field: "businessType",
      minWidth: 100,
      slots: {
        default: ({ row }) => {
          return <div>{row.businessType.label}</div>;
        },
      },
    },
    {
      title: "业务描述",
      field: "description",
      minWidth: 100,
    },
    {
      title: "入账币种",
      field: "currency",
      minWidth: 100,
    },
    {
      title: "入账金额",
      field: "inAmount",
      minWidth: 100,
    },
    {
      title: "出账币种",
      field: "currency",
      minWidth: 100,
    },
    {
      title: "出账金额",
      field: "outAmount",
      minWidth: 100,
      slots: {
        default: ({ row }) => {
          return (
            <div>{row.outAmount > 0 ? `-${row.outAmount}` : row.outAmount}</div>
          );
        },
      },
    },
    {
      title: "平台",
      field: "platform",
      minWidth: 100,
    },
    {
      title: "店铺名称",
      field: "shop",
      minWidth: 100,
    },
    {
      title: "交易前余额",
      field: "beforeBalance",
      minWidth: 100,
    },
    {
      title: "交易后余额",
      field: "afterBalance",
      minWidth: 100,
    },
  ],
  proxyConfig: {
    props: {
      result: "data",
      total: "total",
    },
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => {
        let params = transformData(form);
        getSum(params);
        return getPingpongList({ ...params, ...page }).then((res) => {
          return {
            data: res.data,
            total: res.total,
          };
        });
      },
    },
  },
});

const fieldList = [
  {
    field: "dateRange",
    type: "dateTimeRange",
    style: { width: "360px" },
    select: [
      { label: "添加时间", value: "transactionAt" },
      { label: "交易时间", value: "createdAt" },
    ],
    selectStyle: { width: "120px" },
    itemProps: {
      startPlaceholder: "创建最早时间",
      endPlaceholder: "创建最晚时间",
    },
  },
  {
    field: "currency",
    type: "select",
    options: {
      placeholder: "币种",
      valueKey: "label",
    },
  },
  {
    field: "accountIds",
    type: "select",
    options: {
      placeholder: "收款账号",
    },
  },
  {
    field: "supplierIds",
    type: "input",
    options: {
      placeholder: "流水号",
    },
  },
];
//导出中心
const tableRef = ref();
const DerivedCenterRef = ref();
const handleExport = async () => {
  let condition = getTableSelectRow(tableRef.value);
  DerivedCenterRef.value.open({
    tag_name: config_name["capital"]["capital_flow_pingpong"],
    condition,
  });
};
const actions = [
  {
    label: "导出",
    right: true,
    dkicon: "icon-Upload",
    fn: handleExport,
  },
];
</script>
<style lang="scss" scoped>
.vx-table {
  height: calc(100% - 40px) !important;
}
</style>
